<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en" />
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>图片社交网站</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" /-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script-->
    <!--script src="./assets/js/require.min.js"></script-->
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
    <!--script src="./assets/js/dashboard.js"></script-->
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/charts-c3/plugin.js"></script-->
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
	<link href="./style.css" rel="stylesheet">
    <!--script src="./assets/plugins/maps-google/plugin.js"></script-->
    <!-- Input Mask Plugin -->
    <!--script src="./assets/plugins/input-mask/plugin.js"></script-->
</head>
<body class="">
    <div class="page">
        <div class="page-main">
            <div class="header py-4">
                <div class="container">
                    <div class="d-flex">
                        <a class="header-brand yz" href="./index">
                            <img src="./p/brand.png" class="header-brand-img">图片社交网站
                        </a>
                        <div class="d-flex order-lg-2 ml-auto user-div">
                            <a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
                                <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
                                <span class="ml-2 d-none d-lg-block">
                                     <span class="text-default">未登录</span>
                                     <small class="text-muted d-block mt-1">点击登录</small>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
			<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="row">
			      <div class="col col-login mx-auto bcw">
			        <div class="text-center mb-6">
			          <img src="./assets/brand/tabler.svg" class="h-6" alt="">
			        </div>
					<div class="register-tab" style="display:table;background-color:#fff;border:1px solid rgba(0, 40, 100, 0.12);border-radius:3px;padding-left: 16px;padding-right:16px;">
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#login-content" tabindex="-1" data-toggle="tab">登录</a></div>
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#register-content" tabindex="-1" data-toggle="tab">注册</a></div>
						<div style="padding: 16px;float:right;display:table-cell;">
						    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						</div>
					</div>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="login-content">
						<form class="card" action="" method="post">
						  <div class="card-body p-6">
							
						    <div class="card-title">登录</div>
							
						    <div class="form-group">
						      <label class="form-label">用户名</label>
						      <input type="text" class="form-control" id="login_username" aria-describedby="emailHelp" placeholder="account">
						    </div>
						    <div class="form-group">
						      <label class="form-label">
						        密码
						        <a href="./forgot-password.html" class="float-right small">忘记密码</a>
						      </label>
						      <input type="password" class="form-control" id="login_password" placeholder="Password">
						    </div>
						    <div class="form-group">
						      <label class="custom-control custom-checkbox">
						        <input type="checkbox" class="custom-control-input" />
						        <span class="custom-control-label">记住账号</span>
						      </label>
						    </div>
						    <div class="form-footer">
						      <button type="button" class="btn btn-primary btn-block" onclick="login()">登录</button>
						    </div>
						  </div>
						</form>
						</div>
						<div class="tab-pane fade in" id="register-content">
							<form class="card" id="registerform">
							  <div class="card-body p-6">
							    <div class="card-title">创建新账户</div>
							    <div class="form-group">
							      <label class="form-label">用户名</label>
							      <input type="text" class="form-control" id="user_name" placeholder="用户名">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">邮箱</label>
								  <input type="email" class="form-control" id="email" placeholder="邮箱">
								</div>
							
							    <div class="form-group">
							      <label class="form-label">密码</label>
							      <input type="password" class="form-control" id="input_password" placeholder="密码">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">确认密码</label>
								  <input type="password" class="form-control" id="comfirm_password" placeholder="确认密码">
								</div>
					
							    <div class="form-footer">
							      <button class="btn btn-primary btn-block" type="button" onclick="register();">创建</button>
							    </div>
							  </div>
							</form>
						</div>
			        </div>
			      </div>
			    </div>
			</div>
         </div>
		
        <div class="upload-main mt20">
        	<div class="">
        		<form id="formdata" enctype="multipart/form-data">
        			
        			<div class="div-white">
        				<div class="header header-text">
        				    <p>发布图片</p>
        				</div>
        				<div class="default-padding">
        					<div class="preview">
        						<ul class="preview-list">
        							<li class="preview-list-item-btn" style="position: relative;">
        								
        									<div class="preview-text text-center" style="z-index:1;">
        										<p>+</p>
        										<br>
        										<br>
        										<br>
        										<p>点击添加图片</p>
        									</div>	
        									<div class="preview-btn" style="position: absolute;z-index:0;position:absolute;top: 0px;left: 0px;height:100%;width:100%;">
        										<input type="file" id="upload-input" onchange="previewFile(this)" style="position: absolute;opacity: 0;position:absolute;top: 0px;left: 0px;height:100%;width:100%;" accept="image/gif,image/jpeg,image/x-png" multiple="multiple" / >
        									</div>
        								
        							</li>
        						</ul>
        				    </div>
        				
        					<p class="p-form mt20">想说的话</p>
        					<textarea name="content" class="upload-textarea" id="content" rows="5" placeholder="有神马想说的就写在这里吧~(*•̀ㅂ•́)و&nbsp;&nbsp;&nbsp;&nbsp;盗用作品会被关小黑屋嗷"></textarea>
        					<div>
        						<p class="mt20">添加标签</p>
        						<ul class="tag-list">
        							<li class="tag-list-item-btn" onclick="getInputTag(this);">
        								<div class="btn-tag-add">添加标签 +</div>
        							</li>
        						</ul>
        						<p>推荐标签</p>
        						<a class="tag" onclick="addThisTag(this);">绘画</a>
        						<a class="tag" onclick="addThisTag(this);">摄影</a>
        						<a class="tag" onclick="addThisTag(this);">风景</a>
        					</div>
        				</div>
        			</div>
        			<div class="div-center">
        				<button type="button" class="btn btn-default btn-submit" onclick="submitpic();">发布图片</button>
        			</div>
        		</form>
        	</div>
        </div>
        
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 mt-4 mt-lg-0">
                        其它类似网站<br>Similar Websites
                    </div>
                    <div class="col-lg-8">
                        <div class="row">
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="https://huaban.com/discovery/">花瓣网</a></li>
                                    <li><a href="https://tuchong.com/">图虫</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="https://www.mihuashi.com/artworks">米画师</a></li>
                                    <li><a href="https://bcy.net/illust/toppost100">半次元</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="http://www.lofter.com/">Lofter</a></li>
                                    <li><a href="https://pixabay.com/">pixabay</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="http://artand.cn/works">Artand</a></li>
                                    <li><a href="http://www.poco.cn/works/works_list?classify_type=0&works_type=editor">POCO</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
        
                </div>
            </div>
        </div>
        
        <footer class="footer">
            <div class="container">
                <div class="row align-items-center flex-row-reverse">
                    <div class="col-auto ml-lg-auto">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <ul class="list-inline list-inline-dots mb-0">
                                    <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
                                    <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
                                </ul>
                            </div>
                            <div class="col-auto">
                                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
                        一个以图片为主要内容的社交网站  By Group 4.
                    </div>
                </div>
            </div>
        </footer>
    </div>
	
	
    <script type="text/template" id="user-info">
    	<div class="d-flex order-lg-2 ml-auto user-info">

    	   <div class="dropdown">
    	       <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"><!-- 账户信息 -->
    	           <span class="avatar" style="background-image: url(./p/faces/lh.jpg)" id="userimg"></span>
    	       <span class="ml-2 d-none d-lg-block">
    	         <span class="text-default" id="username">李华</span>
    	         <small class="text-muted d-block mt-1" id="UID">Administrator</small>
    	       </span>
    	       </a>
    	       <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <!-- 下拉框 -->
    	           <a class="dropdown-item" href="profile.html">
    	               <i class="dropdown-icon fe fe-user"></i> 个人信息
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-star"></i> 我的关注
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-thumbs-up"></i> 点赞记录
    	           </a>
    	           <a class="dropdown-item" href="upload" target="_blank">
    	               <i class="dropdown-icon fe fe-upload"></i> 图片上传
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-settings"></i> 设置
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-send"></i> 消息
    	           </a>
    	           <div class="dropdown-divider"></div>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-help-circle"></i> 帮助
    	           </a>
    	           <a class="dropdown-item" href="login.html">
    	               <i class="dropdown-icon fe fe-log-out"></i> 退出
    	           </a>
    	       </div>
    	   </div>
    	</div>
    </script>
    <script type="text/template" id="no-user">
    	<a href="#" class="nav-link pr-0 leading-none" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
    	    <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
    	    <span class="ml-2 d-none d-lg-block">
    	         <span class="text-default">未登录</span>
    	         <small class="text-muted d-block mt-1">点击登录</small>
    	    </span>
    	</a>
    </script>
    <script type="text/template" id="preview-item">
    	<li class="preview-list-item-btn" style="position: relative;">
    		<div class="preview-img" style="z-index:1;">
    			<img class="preview-item-img" style="width:100%">
    		</div>
			<div class="close btn-preview-del" style="position:absolute;top:0px;right:5px"></div>
    	</li>
    </script>
    <script type="text/template" id="tag-item">
    	<li class="tag-list-item">
    		<div class="tag-text">
    		</div>
    		<div class="btn-tag-del close" onclick="delTag(this)">
    		</div>
    	</li>
    </script>
    <script type="text/template" id="tag-list-add-item">
    	<li class = "tag-list-add">
    		<div class="tag-item-add db">
    			<div class="tag-text" onclick="getBtnTag()">
                    <i class="fe fe-x"></i>
    			</div>
    			<input class="tag-add-text" type="text">
    			<div class="btn-tag-del" onclick="addTag(this)">
    				添加
    			</div>
    		</div>
    	</li>
    </script>
    <script type="text/template" id="tag-list-btn-item">
    	<li class="tag-list-item-btn" onclick="getInputTag(this);">
    		<div class="btn-tag-add">添加标签 +</div>
    	</li>
    </script>
    <script type="text/javascript">
		/*
		var img=document.getElementById("file").files; 
		var fileList = Array.from(img);
		
		var deleteIcon = document.createElement("span");
		deleteIcon.className = 'delete';
		deleteIcon.innerText = 'x';
		deleteIcon.dataset.filename = img[i].name;
		imgBox.appendChild(deleteIcon);
		
        $(deleteIcon).click(function () {
                       var filename = $(this).data("filename");
                        $(this).parent().remove();//页面中移除
        
                        var fileList = Array.from(that.files);
                        for(var j=0;j<fileList.length;j++){
                            if(fileList[j].name = filename){
                                fileList.splice(j,1);//从数组中移除
                                break;
                            }
                        }
                        that.files = fileList
                    })
		*/
	    isLogin();
	    var taglist = [];
	    var imgfiles = [];
    	function previewFile(ev){     
    		const file = document.getElementById('upload-input'); 
			imgfiles = imgfiles.concat(Array.from(file.files));
			console.log(imgfiles);
    		const imgUl = $('.preview-list');
			
			for(let i = 0; i < file.files.length;i++)
			{
				const dataURl = getObjectURL(file.files[i]);
				//console.log(file.files[0]);
				var li = $($('#preview-item').html()); 
				//console.log(file.files);
				var img = li.find('div img.preview-item-img');
				let close = li.find('.btn-preview-del');
				
				close.data("filename",file.files[i].name);
				close.click(function(){
					var filename = $(this).data("filename");
					//console.log(filename);
					$(this).parent().remove();//页面中移除
					
					//var fileList = Array.from(imgfiles);
					//console.log(imgfiles);
					for(var j=0;j<imgfiles.length;j++){
						//console.log(imgfiles[j]);
						console.log(imgfiles[j].name+"\n"+filename);
					    if(imgfiles[j].name === filename){
							console.log("find");
					        imgfiles.splice(j,1);//从数组中移除
					        break;
					    }
						else
						{
							console.log("can't find");
						}
					}
					
					console.log(imgfiles);
				});
				//console.log(dataURl);
				img.attr('src',dataURl); 
				//console.log(img.css('src'));
				imgUl.prepend(li);
				//console.log(img);
			}
    		
    	}
    	
		function delPreview(el)
		{
			var tag = $(el).parent();
			tag.remove();
		}
		
    	function addTag(el){
    		var text = $('.tag-add-text').val();
			console.log(text);
    		if(text == ""){
    			return;
    		}
			else
			{
				taglist.push(text);
				console.log(taglist);
			}
    		$('.tag-add-text').val("");
    		console.log(text);
    		var li = $($('#tag-item').html()); 
    		var div_text = li.find('.tag-text');
    		div_text.html(text);
    		//console.log(div_text);
    		const tagUl = $('.tag-list');
    		tagUl.prepend(li);
    	}
    	
    	function delTag(el){
    		var tag = $(el).parent();
			console.log($(el).prev());
			text = ($(el).prev())[0].innerText;
			for(var j=0;j<taglist.length;j++){
				//console.log(imgfiles[j]);
				console.log(taglist + "\n" + text);
			    if(taglist[j] === text){
					console.log("find tag");
			        taglist.splice(j,1);//从数组中移除
			        break;
			    }
				else
				{
					console.log("can't find tag");
				}
			}
    		tag.remove();
			console.log(taglist);
    	}
    	
    	function getInputTag(el){
    		const tagUl = $('.tag-list');
    		$(el).remove();
    		var getTagHtml = $('#tag-list-add-item').html();
    		tagUl.append(getTagHtml);
    	}
    	
    	function getBtnTag(){
    		const tagUl = $('.tag-list');
    		var tag = $('.tag-list-add');
    		tag.remove();
    		var getTagHtml = $('#tag-list-btn-item').html();
    		tagUl.append(getTagHtml);
    	}
    	
    	function addThisTag(el){
    		var tag_text = $(el).html();
    		var li = $($('#tag-item').html());
    		var div_text = li.find('.tag-text');
			taglist.push(tag_text);
			console.log(taglist);
    		div_text.html(tag_text);
    		//console.log(div_text);
    		const tagUl = $('.tag-list');
    		tagUl.prepend(li);
    	}
		
		function submitpic()
		{
			var formdata = new FormData($("#formdata")[0]);
			var file = document.getElementById('upload-input'); 
			//console.log(($(file)).val());
			//var files = file.files;
			//console.log(files);
			//var imgs={};
			var picnames = [];
			for(let i = 0; i<imgfiles.length;i++)
			{
				///imgs[i] = imgfiles[i];
				console.log(imgfiles[i].name);
				formdata.append(imgfiles[i].name,imgfiles[i]);
				picnames.push(imgfiles[i].name);
			}
			//imgs['length'] = imgfiles.length;
			//FileList不可构造,只能使用这种方法模拟多文件上传
			//Object.setPrototypeOf(imgs,files);
			//console.log(imgs);
			
			formdata.append('picnames',picnames);
            formdata.append('description',$('#content').val())
            formdata.append('tags',taglist);
			//console.log(formdata);
			
			$.ajax({
						method: "POST",
						url: "/uploadpicture",
						data:formdata,
						cache: false,
						async: false,
						contentType: false, //必须，告诉jquery不要设置Content-Type请求头
						processData: false, //必须，告诉jquery不要处理发送的数据
					}).done(function(result) {	
						alert(result);
					}).fail(function(result) {
			            alert("上传失败");
					});
			
		}
    	//建立一個可存取到該file的url
    	
    	    function getObjectURL(file) {
    	
    	        var url = null ;
    	
    	        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    	
    	        if (window.createObjectURL!=undefined) { // basic
    	
    	            url = window.createObjectURL(file) ;
    	
    	        } else if (window.URL!=undefined) { // mozilla(firefox)
    	            url = window.URL.createObjectURL(file) ;
    	
    	        } else if (window.webkitURL!=undefined) { // webkit or chrome
    	
    	            url = window.webkitURL.createObjectURL(file) ;
    	
    	        }
    	
    	        return url ;
    	
    	    }
    	
    	function isLogin()
    	{
    		$.ajax({
    			method: "GET",
    			url: "/islogin",
    			dataType: "json",
    			contentType: "application/json",
    		}).done(function(result) {	
    		    if(result.status === "0")
    			{
    				let userinfo = document.getElementById('user-info');
    				let user = $($(userinfo).html());
    				var nouser = $('.user-a');
    				nouser.remove();
    				var parent = $('.user-div');
    				let user_name = user.find('#username');
    				let user_id = user.find('#UID');
    				let user_img = user.find('#userimg');
    				user_name.text(result.user_name);
    				user_id.text(result.user_id);
    				user_img.css("background-image","url(" + result.user_img + ")");
    				parent.append(user);
    			}
    		}).fail(function(result) {
    		    alert("获取图片失败，请刷新网站");
    			});
    		}
    </script>
</body>

</html>